<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <el-form :inline="true" :model="sifterForm" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="sifterForm.key" placeholder="输入职位关键字" @input="proxy.$utils.debounce(updalist,sifterForm)"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="sifterForm.time" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="small" @change="datePickerChange"></el-date-picker>
            </el-form-item>
        </el-form>
        <div>
        </div>
    </div>

    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="persionname" label="姓名" width="80"> </el-table-column>
            <el-table-column prop="jobname" label="应聘职位" width="140"> </el-table-column>
            <el-table-column prop="sex" label="性别" width="60">
                <template #default="props">
                    <span>{{proxy.$utils.findObj(props.row.sex,globalData.sexAry,'value').text}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="birthday" label="出生年月" width="120"> </el-table-column>
            <el-table-column prop="major" label="专业"></el-table-column>
            <el-table-column prop="edu" label="学历" width="70">
                <template #default="props">
                    <span>{{proxy.$utils.findObj(props.row.edu,globalData.eduList,'value').text}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="薪资" width="90">
                <template #default="props">
                    <span>
                        {{((props.row.salary_start/1000).toFixed(1)-(props.row.salary_start/1000).toFixed(0))>0?(props.row.salary_start/1000).toFixed(1):(props.row.salary_start/1000).toFixed(0)}}~{{((props.row.salary_end/1000).toFixed(1)-(props.row.salary_end/1000).toFixed(0))?(props.row.salary_end/1000).toFixed(1):(props.row.salary_end/1000).toFixed(0)}}K</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="经验/年" width="80">
                <template #default="props">
                    <span>{{props.row.working_duration_start}}～{{props.row.working_duration_end}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="留言内容" width="80">
                <template #default="props">
                    <span class="lineOne pointer base-color" @click="showmsg(props.row.msg)">{{props.row.msg}}</span>
                </template>
            </el-table-column>
            
            <el-table-column prop="interview" label="状态" width="70">
                <template #default="props">
                    <span :class="[proxy.$utils.findObj(props.row.interview,interview,'value').color]">{{proxy.$utils.findObj(props.row.interview,interview,'value').text}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="intime" label="预约时间" width="180"> </el-table-column> -->
            
            <el-table-column prop="" label="操作" width="140">
                <template #default="props">
                    <span class="pointer mr10 base-color" @click="editData(props.row,3)">查看简历</span>
                    <span class="pointer base-color" @click="showchart(props.row)">聊天</span>
                    <br/>
                    <span v-if="props.row.interview==0" class="pointer mr10 base-color" @click="shownotice(props.row,1)">通知面试</span>
                    <span v-if="props.row.interview==0" class="pointer danger-color" @click="shownotice(props.row,2)">拒绝</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span v-if="isEdit==3">人才简历</span>
        </div>
        <div class="form-box">
            <div v-if="isEdit==3" class="">
                <Resume :value="form"/>
            </div>
        </div>
    </div>


    <el-dialog v-model="obj.dialog.design" :title="obj.dialog.designTitle" :close-on-click-modal="false" :destroy-on-close="true">
        <div>{{obj.dialog.content}}</div>
    </el-dialog>

    <el-dialog v-model="obj.noticedialog.design" :title="obj.noticedialog.designTitle" :close-on-click-modal="false" :destroy-on-close="true">
         <el-form ref="notice_ruleFormRef" :inline="true" :model="send_form" label-width="120px">
            <el-form-item v-if="send_form.interview==2" :rules="[ { required: true, message: '请填写拒绝原因'} ]" label="拒绝原因" prop="interviewresult">
                <el-input style="width:300px;" type="textarea" autocomplete="off" clearable v-model="send_form.interviewresult"></el-input>
            </el-form-item>
            <el-form-item v-if="send_form.interview==1" :rules="[ { required: true, message: '请选择面试时间'} ]" label="面试时间" prop="interviewtime">
                <el-date-picker style="width:300px;" type="datetime" value-format="YYYY-MM-DD hh:mm:ss" v-model="send_form.interviewtime"></el-date-picker>
            </el-form-item>
            <el-form-item v-if="send_form.interview==1" :rules="[ { required: true, message: '请输入面试地点'} ]" label="面试地点" prop="interviewaddress">
                <el-input style="width:300px;" v-model="send_form.interviewaddress"></el-input>
            </el-form-item>
            <el-form-item label=" " label-width="120px">
                <el-button class="btn" :loading="false" @click.prevent="obj.noticedialog.design = false" native-type="submit">取消</el-button>
                <el-button type="primary" class="btn" :loading="false" @click.prevent="send" native-type="submit">通知</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete } from '@element-plus/icons-vue'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        dialog: {
            design: false,
            designTitle: '留言内容',
            content: ''
        },
        noticedialog: {
            design: false,
            designTitle: '通知面试',
        },
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            "key":"",
            starttime: '',
            endtime: '',
            currentpage: 1,
            pagesize: 10
        },
        form: {},
        interview: [
            {value:'0',text:"待处理",color:'warning-color'},{value:'1',text:"已通知",color:'success-color'},{value:'2',text:"拒绝",color:'danger-color'}
        ],
        send_form: {
            "apply_id":"",
            "interview":"",
            "interviewresult":"",
            "interviewtime": "",
            "interviewaddress": ""
        },
        notice_ruleFormRef: null,
        send_ruleFormRef: null,
        popovervisibles: {},
    });

    const show = (row)=>{
        cleanpop()
        send_form.value.interviewresult = ''
        popovervisibles.value[`visible${row.apply_id}`] = true
        
    }
    const shownotice = (row,interview)=>{
        obj.noticedialog.design = true
        obj.noticedialog.designTitle = interview==1?'通知面试':'拒绝理由'
            send_form.value = {
                ...send_form.value,
                apply_id: row.apply_id,
                interview: interview
            }
    }
    const showmsg = (content)=>{
        obj.dialog.design = true;
        obj.dialog.content = content
    }
    
    const showchart =(row)=>{
        // proxy.chartdata = {
        //     persion_id: row.persion_id,
        // }
        proxy.routerPushNewMixin('/chartpersiondetail',{job_id:row.job_id,persion_id:row.persion_id,persionname:row.persionname})
    }

    const cleanpop = ()=>{
        for (const key in popovervisibles.value) {
            if (Object.hasOwnProperty.call(popovervisibles.value, key)) {
                popovervisibles.value[key] = false  
            }
        }
    }

    // 通知面试或拒绝
    const send = ()=>{
        if(notice_ruleFormRef){
            notice_ruleFormRef.value.validate((valid) => {
                if (valid) {
                    proxy.$ajax({url: 'recruit/apply/interview',data:send_form.value,bfLoading: true}).then(d => {
                        console.log(d);
                        if(d.success){
                            proxy.elMessageMixin(send_form.value.interview==1?'通知成功！':'拒绝成功！', 'success')
                            send_form.value = {
                                "apply_id":"",
                                "interview":"",
                                "interviewresult":"",
                                "interviewtime": "",
                                "interviewaddress": ""
                            }
                            obj.noticedialog.design = false
                            updalist()
                        }else{proxy.elMessageMixin(date.err, 'error')}
                    }).catch(e => {
                        console.log(e)
                        if(e == "登录已过期，请重新登录"){
                            proxy.routerPushMixin('/')
                        }
                    })
                }
            })
        }
    }


    const datePickerChange = (e)=>{
        if(e&&e.length==2){
            sifterForm.value.starttime = e[0]
            sifterForm.value.endtime = e[1]
            updalist(obj.sifterForm)
        }
    }

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'recruit/apply/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
                list.value.map(e=>{
                    popovervisibles.value[`visible${e.apply_id}`] = false
                })
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const typeChange = (e,key)=>{
        console.log(key);
        if(key=='salary'||key=='workyear'){
            sifterForm.value[`${key}_start`] = e?e[0]:''
            sifterForm.value[`${key}_end`] = e?e[1]:''
            updalist(obj.sifterForm)
        }else{
            sifterForm.value[key] = e||''
            updalist(obj.sifterForm)
        }
    }

    const re_turn = ()=>{
        isEdit.value = 0;
    }

    const editData = (item,isEditidx)=>{
        // return
        proxy.$ajax({url: 'persion/get',data:{persion_id:item.persion_id},bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                form.value = {
                    ...d.msg,
                    persion_id: item.persion_id
                }
                isEdit.value = isEditidx
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    
    let { list, sifterForm, isEdit, total, form, interview, send_ruleFormRef, notice_ruleFormRef, send_form,popovervisibles } = toRefs(obj)
</script>

<style lang="scss" scoped>
</style>